<template>
  <div class="hotelOptionPay">
    <el-dialog v-model="dialogFormVisible" :show-close="false" custom-class="dialogSet"  width="500px">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header flex aCenter jsb " style="padding: 15px;">
          <h4 :id="titleId" :class="titleClass">{{roomTTitle}}</h4>

          <div :id="close" @click="dialogFormVisible=false">
            <el-button type="danger"><el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>close</el-button>
          </div>
        </div>
      </template>
      <div class="boxDialog pb20">
        <img :src="imgDialog" alt="">
        <div class="px20">
          floor：3-5 layers, room: 25-28 square meters, bed type: twin bed 1.1 meters, can be extra bed, extra bed may need to add part of the cost, there is free Internet
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogFormReserve" title="Shipping address" width="500px">
      <template #header="{ close, titleId, titleClass }">
        <div class="my-header" style="padding: 15px;">
          <h4 :id="titleId" :class="titleClass">Reservation</h4>
        </div>
      </template>
      <div style="padding:0 15px 15px 15px;">
        <div class="flex aCenter">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            size="large"
            start-placeholder="Start date"
            end-placeholder="End date" 
          >
          </el-date-picker>
        </div>
        <div class="flex aCenter cRed f20 fWeight mt20">
           Price:{{ priceVal }}
        </div>
        <div class="tRight mt20">
          <el-button @click="dialogFormReserve=false" size="large">cancel</el-button>
          <el-button type="primary" @click="confirmReserve" size="large">Confirm</el-button>
        </div>
      </div>

    </el-dialog>
    <div class="tiBox flex aCenter jsb mb20">
      <div class="pt20">
        <div class="title flex mb10">
          <div>
            Shanghai Jinjiang Capital Classic Nanjing Road East Bund Hotel
          </div>
        
        </div>
        <div class="flex aCenter mb10 sonTitle">
          <div class="desc">
            Shanghai Jinjiang Capital Classic Nanjing Road East Bund Hotel
          </div>
          <!-- <div class="iconBg"></div> -->
        </div>
        <!-- <div class="address">
          address：98 East Nanjing Road
        </div> -->
      </div>
      <div class="rightBox">
        <div class=" mr10 rightBoxSon">
          <el-rate v-model="rateVal"></el-rate>
        </div>
        <div class="rSonTwo">Good!</div>
      </div>
      <!-- <div class="rightBox">
        <div class="br10 mr10 rightBoxSon">
          <span class="fsNum">8.8</span>
          grade
        </div>
        <div class="rSonTwo">Great</div>
      </div> -->
    </div>
    <div class="imgGroup flex jsb">
      <div class="imgBox pRelative">
        <img style="width:100%;height:100%;" :src="priceOne" alt="">
        <div class="pAbsolute descImg">Living on the Bund, dreaming back to the Republic of China</div>
      </div>
      <div class="tLeft flex1 pl10">
        <div class="fWeight f20">Hotel Information</div>
        <div></div>
      </div>
      <!-- <div class="flex flexWrap rightBoxI jsb">
        <div class="smallImg">
          <img width="150" height="120" :src="hourse1" />
        </div>
        <div class="smallImg">
          <img width="150" height="120" :src="hourse2" />
        </div>
        <div class="smallImg">
          <img width="150" height="120" :src="hourse3" />
        </div>
        <div class="smallImg">
          <img width="150" height="120" :src="hourse4" />
        </div>
        <div class="smallImg">
          <img width="150" height="120" :src="hourse5" />
        </div>
        <div class="smallImg">
          <img width="150" height="120" :src="hourse6" />
        </div>
      </div> -->
    </div>
    <div class="pb40">

      <el-table  :header-cell-style="{backgroundColor:'#f5f5f5'}"
                 :data="tableData"
                  border
                 style="width: 100%; margin-top: 20px" >
        <el-table-column prop="name" label="Room" >
          <template #default="scope">
            <div class="aCenter flex">
            <img :src="scope.row.roomTypeImg" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="house type" width="240px">
          <template #default="scope">
            <div class="mb40">
              {{ scope.row.roomType }}
            </div>
            <div class="flex aCenter jsb">
              <div>
                floor space:{{ scope.row.mianji }}
              </div>
              <div>
                <el-button size="small" type="text" @click="showDialog(scope.row)">view details</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="Maximum number" >
          <template #default="scope">
            <div class="aCenter flex">
              <el-icon><User /></el-icon>
              {{ scope.row.personNum }}resident
            </div>
          </template>
        </el-table-column>
        <el-table-column label="Policy" width="200" >
          <template #default="scope">
            <ul class="policyD">
              <li v-for="(item,index) in scope.row.policyList" :key="index">{{ item }}</li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="price" >
          <template #default="scope">
            <div style="color:#2DB1FD;font-size:20px;font-weight: bold;">
              ${{scope.row.price}}<span style="font-size: 18px;">/Day</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="amount3" label="Operation" width="130">
          <template #default="scope">
            <div class="flex aCenter jsb tCenter tCenter">
              <!-- <el-select
                  @change="changeOption(scope.row.roomNum,scope.$index,scope.row.singlePrice)"
                  v-model="scope.row.roomNum"
                  placeholder="Select"
                  size="small"
                  style="width: 80px"
              >
                <el-option
                    v-for="item in roomNumTList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                />
              </el-select> -->
              <el-button @click="tapReserve(scope.row)" type="primary">
                Reserve
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
const roomNumTList=[
  {name:'1 room',value:1},
  {name:'2 room',value:2},
  {name:'3 room',value:3},
  {name:'4 room',value:4}
]
const roomNumz=ref('')
const totalPrice=ref('')
const imgDialog=ref('')
const roomTTitle=ref('')
const rateVal=ref(4)
const priceVal=ref(0)
const dateRange=ref(0)
const dialogFormVisible=ref(false);
const dialogFormReserve=ref(false);
const priceOne=new URL(`@/assets/img/shanghaiDetail/first.jpeg`, import.meta.url).href;
const hourse1=new URL(`@/assets/img/shanghaiDetail/first1.jpeg`, import.meta.url).href;
const hourse2=new URL(`@/assets/img/shanghaiDetail/first2.jpeg`, import.meta.url).href;
const hourse3=new URL(`@/assets/img/shanghaiDetail/first3.jpeg`, import.meta.url).href;
const hourse4=new URL(`@/assets/img/shanghaiDetail/first4.jpeg`, import.meta.url).href;
const hourse5=new URL(`@/assets/img/shanghaiDetail/first5.jpeg`, import.meta.url).href;
const hourse6=new URL(`@/assets/img/shanghaiDetail/first6.jpeg`, import.meta.url).href;
const tableData =reactive( [
  {
    roomTypeImg:new URL(`@/assets/img/roomType/shangwuOne.jpg`, import.meta.url).href,
    id: '12987122',
    roomType: 'Fashion business room',
    mianji:'23㎡',
    personNum:'2',
    policyList:[
      '·not include breakfast',
      '·online payment',
      '·Secondary confirmation'
    ],
    roomNum:1,
    price:'110',
    singlePrice:'110'
  },
  {
    roomNum:1,
    roomTypeImg:new URL(`@/assets/img/roomType/shangwuOne.jpg`, import.meta.url).href,
    id: '12987122',
    roomType: 'Fashion business room',
    mianji:'23㎡',
    personNum:'2',
    policyList:[
      '·not include breakfast',
      '·online payment',
      '·Secondary confirmation'
    ],
    price:'120',
    singlePrice:'120'
  },
  {
    roomTypeImg:new URL(`@/assets/img/roomType/jzTwoCHours.jpg`, import.meta.url).href,
    id: '12987122',
    roomType: 'Exquisite twin room',
    mianji:'30㎡',
    personNum:'2',
    policyList:[
      '·not include breakfast',
      '·online payment',
      '·Secondary confirmation'
    ],
    roomNum:1,
    price:'130',
    singlePrice:'130'
  },
  {
    roomNum:1,
    roomTypeImg:new URL(`@/assets/img/roomType/jzTwoCHours.jpg`, import.meta.url).href,
    id: '12987122',
    roomType: 'Exquisite twin room',
    mianji:'30㎡',
    personNum:'2',
    policyList:[
      '·not include breakfast',
      '·online payment',
      '·Secondary confirmation'
    ],
    price:'140',
    singlePrice:'140'
  },
])
const showDialog=(data)=>{
  console.log(data.roomTypeImg);
  dialogFormVisible.value=true
  roomTTitle.value=data.roomType
  imgDialog.value=data.roomTypeImg
}
const changeOption=(roomNum,index,singlePrice)=>{
  tableData[index].price=roomNum*singlePrice
}
const confirmReserve=()=>{
  ElMessage({
    message: 'successful appointment.',
    type: 'success',
    duration:1000
  })
  dialogFormReserve.value=false;

}
const tapReserve=(data)=>{
  dialogFormReserve.value=true;
  totalPrice.value=data.price;
  roomNumz.value=data.roomNum;
  priceVal.value=data.price
  dialogFormReserve.value=true;
}
const objectSpanMethod = ({
                            row,
                            column,
                            rowIndex,
                            columnIndex,
                          }) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}
</script>

<style lang="less" scoped>
.hotelOptionPay{
  width:1000px;
  margin:0 auto;
}
::v-deep .el-dialog{
  padding: 0!important;
  .el-dialog__header{
    padding-bottom: 0;
  }
}
.policyD{
  text-align: left;
  list-style: unset!important;
  li,ol{
    text-align: left;
    list-style: unset!important;
  }
}
.boxDialog{

  img{
    width:100%;
    height:200px;
    margin-bottom: 20px;
  }
}
.imgGroup{
  .rightBoxI{
    width:312px;
  }
  .imgBox{
    width:680px;
    height:380px;
    .descImg{
      color:#fff;
      position: absolute;
      left: 15px;
      bottom: 15px;
      padding: 8px;
      background-color: rgba(0, 0, 0, .75);
      border-radius: 3px;
      font-size: 14px;
      line-height: 24px;
    }
    img{
      width:100%;
      height:100%;
      border-radius: 4px;
    }
  }
  .smallImg{
    margin-bottom: 10px;
    img{
      width:150px;
      height:120px;
      border-radius: 4px;
    }
  }
}
.tiBox{
  align-items: end;
  .title{
    font-size: 24px;
  }
  .desc{
    font-size: 14px;
    line-height: 24px;
    color: #666;
  }
  .iconBg{
    margin-left: 10px;
    height: 13px;
    width: 70px;
    overflow: hidden;
    vertical-align: -1px;
    display: inline-block;
    background: url(./../assets/img/hotel/hotel-detail-icon8.png) no-repeat;
    background-position: -150px -230px;
  }
}
.rightBox{
  display: flex;
  align-items: center;
  .rightBoxSon{
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center; 
    .fsNum{
      font-size: 30px;
      font-style: normal;
      color: #ff8a00;
    }
  }
  .rSonTwo{
    //border-left: 1px solid #e5e5e5;
    line-height: 45px;
    // padding-left: 10px;
    color:#F8C18B;
  }
}
.address{
  line-height: 24px;
  font-size: 12px;
  color: #999;
}
</style>